<template>
  <n-data-table :columns="columns" :data="data" :pagination="pagination" :bordered="false" />
</template>
<script lang="ts" setup>
import { NButton, type DataTableColumn } from 'naive-ui'
import { h, onMounted, ref } from 'vue'
import ollama, { type ModelResponse } from 'ollama'
import dayjs from 'dayjs'
import router from '@/router'

defineOptions({ name: 'ModelState' })
/**表头 */
const columns = ref<DataTableColumn<ModelResponse>[]>([
  { title: '名称', key: 'name' },
  { title: '大小', key: 'size', render: (row) => (row.size / 1024 / 1024).toFixed(2) + 'MB' },
  {
    title: '更新时间',
    key: 'modified_at',
    render: ({ modified_at }) => dayjs(modified_at).format('YYYY-MM-DD HH:mm:ss'),
  },
  {
    title: '聊天',
    key: '',
    render: (row) => {
      return h(
        NButton,
        {
          onClick: () => router.push({ path: `/chat` }),
          type: 'primary',
        },
        () => '聊天',
      )
    },
  },
])
/**模型列表 */
const data = ref<ModelResponse[]>([])
/**分页 */
const pagination = ref(false)
/**获取 */
const getModelList = async () => {
  const { models = [] } = await ollama.list()
  data.value = models
}
/**初始化 */
onMounted(() => {
  getModelList()
})
</script>
<style lang="scss"></style>
